<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页特效</title>
    <script src="../../js/jquery-3.4.1.js"></script>
</head>
<body>
<div id="box">
    <button id="login-btn">登&nbsp;录</button>
</div>
<div>
    <button id="afterAddElement">在之后添加一个元素</button>
</div>
<div>
    <button id="checkAfter">检测上一个按钮之后是否有元素</button>
</div>
<div>
    <button id="rmElement">删除上上一个元素之后的元素</button>
</div>
</body>
<script>

    let count = 1;

    const loggingMessage = '登&nbsp;录&nbsp;中&nbsp;...';
    const loginSuccessMessage = '登&nbsp;录';

    $(function () {
        buttonInit();
    });

    function buttonInit() {
        $('#login-btn').click(function () {
            let a = 1;
            console.log("点击了");
            $('#login-btn').html(loggingMessage)
                .attr('disabled',"true")
                .css({backgroundColor: 'red'});
            let timer = setInterval(() => {
                a++;
                console.log('定时器执行了');
                if(a === 3) {
                    clearInterval(timer);
                    $('#login-btn').html(loginSuccessMessage)
                        .removeAttr("disabled")
                        .css({backgroundColor: 'white'});
                }
            }, 1000);
        });

        $('#afterAddElement').click(function () {
            $(this).after(`<div class="el-form-item__error">请选择主讲老师${count++}</div>`);
        });

        $('#checkAfter').click(function () {
            console.log($('#afterAddElement').nextAll().length);
        });

        $('#rmElement').click(function () {
            $('#afterAddElement').next().remove();
        });
    }

</script>
</html>